<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>ces</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<!-- 引入babel-polyfill es6转es5 -->
		<script src="https://cdn.bootcss.com/babel-polyfill/7.8.3/polyfill.min.js"></script>
		<!-- 引入 Swiper -->
		<link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.3/dist/vue-awesome-swiper.min.js"></script>
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}

			.app-view-wrapper {
				width: 100%;
				height: 50%;
			}

			.wrapper-swiper-container {
				height: 100%;
				width: 50%;
			}
		</style>

	</head>
	<body>
		<div id="app" class="app-view-wrapper">
			<!-- 完全的vue里面的写法 -->
			<swiper class="wrapper-swiper-container" :options="swiperOption">
				<swiper-slide v-for="(item,index) in list">
					<img :src="item">
				</swiper-slide>
			</swiper>
		</div>

		<script type="text/javascript">
			Vue.use(window.VueAwesomeSwiper);
			new Vue({
				el: '#app',
				data() {
					return {
						swiperOption: {
							// direction: 'vertical',//竖
							direction: 'horizontal',//横滑
							centeredSlides: true //居中
						},
						list: ["image/banenr2.png", "image/banner4.png"]
					}
				},
				created() {},
				// 方法
				methods: {}
			});
		</script>
	</body>
</html>
